import React, { useEffect, useState } from 'react';
import Taro, { getCurrentInstance, useDidShow } from "@tarojs/taro";
import { View, Text, Button, ScrollView } from '@tarojs/components'
import PopUp from '@/components/PopUp'
import Select from '@/components/FormCondition/Select'
import Input from '@/components/FormCondition/Input'
import CheckBox from '@/components/FormCondition/CheckBox';
import { fakeSubmitPrePaymentOrder, fetchPrePaymentOrderWechatPayInfo, } from '@/server/order'
import { toast, goBack, fakeStorage, loginData } from '@/utils/utils'
import { fetchUserInfoStyleZkxt, fakeOrganizationUserExamIntel, fetchGetDivideIntoSectionByUserScore } from '@/server/school'
import './index.scss'
const PayVolunteerPop = (props) => {
    const { visible = {}, onClose } = props
    const { show = false, detail = {} } = visible
    const { cardName, scoreFlag, lowScore, buyNotice, price, sort, highScore } = detail
    const [active, setActive] = useState('gaokao')
    const [list, setList] = useState([])
    const [section, setSection] = useState({})
    const [count, setCount] = useState(0)
    const { mobile } = loginData() ? loginData() : {}
    useEffect(() => {
        if (show) { fetchData() }
    }, [show])
    const fetchData = () => {
        fetchUserInfoStyleZkxt(
            {
                examIntelType: active,
            }
        ).then(val => {
            const { styleList } = val
            setList(styleList)
            const data = styleList.reduce((value, item) => {
                if (item.code === 'province') {
                    return {
                        ...value,
                        provinceCode: item.provinceList.map(key => { return key.provinceCode }).toString(),
                        provinceName: item.provinceList.map(key => { return key.provinceName }).toString(),
                        subjectReclean: item.provinceList.map(key => { return key.subjectList.filter(val => { return val.selectFlag === '1' }).map(val => { return val.value }).toString() }).toString(),

                    }
                } else if (item.code === 'score') {
                    return {
                        ...value,
                        cultureScore: item.content
                    }

                } else if (item.code === 'place') {
                    return {
                        ...value,
                        culturePlace: item.content
                    }
                }
                return value

            }, {})
            const { provinceCode, cultureScore } = data
            if (cultureScore > 200 && cultureScore < 750) {
                fetchGetDivideIntoSectionByUserScore({
                    candidateCategory: 'general',
                    provinceCode,
                    score: cultureScore
                }).then((val = {}) => {
                    setSection(val)
                })
            }
        })
    }
    const onChange = (code, data, index) => {
        if (code === 'province') {
            console.log(data)
            if (data.length > 3) {
                return toast('选择科目不能大于3')
            }
            setList((child) => {
                return child.map(e => {
                    const { provinceList = [] } = e
                    if (e.code === code) {
                        console.log(e.code, code)
                        return {
                            ...e,
                            provinceList: provinceList.map((c, o) => {

                                if (o === index) {
                                    return {
                                        ...c,
                                        subjectList: c.subjectList.map(d => {
                                            return {
                                                ...d,
                                                selectFlag: data.includes(d.value) ? '1' : '0'
                                            }
                                        })
                                    }
                                }
                                return c
                            })
                        }
                    }
                    else {
                        return e
                    }
                })
            })
        }
        else {

            setList(list.map(val => {
                console.log(val, code, data,)
                if (val.code === code) {
                    return {
                        ...val,
                        ...data
                    }
                }
                return val
            }))
        }

    }
    const submit = () => {
        fakeSubmitPrePaymentOrder({
            orderType: 'zkxtCard',
            zkxtCardId: detail.id
        }).then(val => {
            const { orderSn } = val
            fetchPrePaymentOrderWechatPayInfo({
                orderSn,
            }).then((e) => {
                Taro.requestPayment({
                    ...e,
                    success: (res) => {
                        onClose()
                        toast('开通成功')
                    },
                    fail: (res) => {
                        toast("支付失败");
                    },
                });
            });

        })
        // const data = list.reduce((value, item) => {
        //     if (item.code === 'province') {
        //         return {
        //             ...value,
        //             provinceCode: item.provinceList.map(key => { return key.provinceCode }).toString(),
        //             provinceName: item.provinceList.map(key => { return key.provinceName }).toString(),
        //             subjectReclean: item.provinceList.map(key => { return key.subjectList.filter(val => { return val.selectFlag === '1' }).map(val => { return val.value }).toString() }).toString(),

        //         }
        //     } else if (item.code === 'score') {
        //         return {
        //             ...value,
        //             cultureScore: item.content
        //         }

        //     } else if (item.code === 'place') {
        //         return {
        //             ...value,
        //             culturePlace: item.content
        //         }
        //     }
        //     return value

        // }, {})
        // const { culturePlace = 0, cultureScore = 0 } = data
        // if (culturePlace > 10000000) {
        //     return toast('不可超出7位')
        // } else if (cultureScore > 750) {
        //     return toast('不可超出750')
        // } else {
        //     fakeOrganizationUserExamIntel({
        //         ...data,
        //         examIntelType: active
        //     }).then(val => {


        //     })
        // }
    }
    const fetchScore = (e) => {
        const data = list.reduce((value, item) => {
            if (item.code === 'province') {
                return {
                    ...value,
                    provinceCode: item.provinceList.map(key => { return key.provinceCode }).toString(),
                    provinceName: item.provinceList.map(key => { return key.provinceName }).toString(),
                    subjectReclean: item.provinceList.map(key => { return key.subjectList.filter(val => { return val.selectFlag === '1' }).map(val => { return val.value }).toString() }).toString(),

                }
            } else if (item.code === 'score') {
                return {
                    ...value,
                    cultureScore: item.content
                }

            } else if (item.code === 'place') {
                return {
                    ...value,
                    culturePlace: item.content
                }
            }
            return value

        }, {})
        const { provinceCode, cultureScore } = data
        if (e > 200 && e < 750) {
            fetchGetDivideIntoSectionByUserScore({
                candidateCategory: 'general',
                provinceCode,
                score: e
            }).then((val = {}) => {
                const { startRank } = val
                onChange('place', {
                    content: startRank
                })
                setSection(val)
            })
        }

    }
    const { year, startRank, endRank, id } = section
    return <View className="PayVolunteerPop_box">
        <PopUp extra={<View></View>} {...props}>
            <ScrollView scrollY className="PayVolunteerPop_content_box">
                <View className="PayVolunteerPop_content_BgBox">
                    <View className="PayVolunteerPop_name_box">
                        <View className="PayVolunteerPop_name_info font_hide">
                            {cardName}
                        </View>
                        <View className="PayVolunteerPop_name_tag">
                            普通高考
                        </View>
                    </View>
                    <View className="PayVolunteerPop_score_box">
                        <View className="">
                            适用于考生成绩：     {scoreFlag === '0' ? '全部考生' : sort !== 4 ? `中低分段考生${highScore}分以下(不含)` : `高分段考生${lowScore}分以上(含)`}
                        </View>
                        <View className="">
                            用户账号：{mobile}
                        </View>
                    </View>
                    <View className="PayVolunteerPop_red_box">
                        <View className="">
                            下单后将立即解锁权益数据查询
                        </View>
                        <View className="">
                            如含有一对一填报权益，24小时内规划师将与您联系
                        </View>
                    </View>
                    {/* <View className='PayVolunteerPop_form'>
                        {list.map((val, index) => {
                            const { code, provinceList = [], name, content } = val
                            if (code === 'province') {
                                return provinceList.map((o, key) => {
                                    const { provinceName, subjectList } = o
                                    const checkList = subjectList.filter(c => { return c.selectFlag === '1' }).map(k => { return k.value })
                                    console.log(checkList, 'checkList')
                                    return <View>
                                        <Select require={false} onChange={() => { toast('仅开放浙江数据，其他生源地数据暂未开放') }} value={provinceName} label={name}></Select>
                                        <CheckBox require={false} onChange={(e) => onChange(code, e, index)} value={checkList} hasFlag={true} flagKey={'selectFlag'} list={subjectList.map(c => {
                                            return {
                                                ...c,
                                                label: c.name,
                                                key: c.value
                                            }
                                        })} desc={'（7选3）'} label={'选择科目'}></CheckBox>

                                    </View>
                                })
                            } else if (code === 'score') {
                                return <Input require={false} onBlur={(e) => {
                                    fetchScore(e.target.value)
                                }} type='number' placeholder='请输入成绩/预估分' onChange={(e) => {
                                    onChange(code, {
                                        content: e
                                    })
                                }} value={content} label={name}></Input>
                            } else if (code === 'place') {
                                return <Input type='number' placeholder='请输入位次' onChange={(e) => {
                                    onChange(code, {
                                        content: e
                                    })
                                }} value={content} label={name}></Input>
                            }
                            return null
                            // return <Text {...val}></Text>
                        })}
                    </View>
                    {id ? <View className='PayVolunteerPop_toast_desc'>
                        分数对应<Text className='PayVolunteerPop_toast_descColor1'>{year}</Text>年排名区间为<Text className='PayVolunteerPop_toast_descColor1'>{startRank}</Text>-<Text className='PayVolunteerPop_toast_descColor1'>{endRank}</Text>，可手动输入
                    </View> : ''} */}
                    <View className='PayVolunteerPop_ms_box'>
                        <View className='PayVolunteerPop_ms_icon'></View>
                        <View className='PayVolunteerPop_ms_content'>
                            下单成功后高考成绩公布前省份、选科、成绩可任意修改，高考成绩公布后仅可<Text className='PayVolunteerPop_ms_color1'>修改1次</Text>！请慎重填入信息；
                        </View>
                    </View>
                    <View onClick={() => {
                        submit()
                    }} className='PayVolunteerPop_content_btn'>
                        立即购买￥{price}
                    </View>
                    <View onClick={() => { onClose() }} className='PayVolunteerPop_close'></View>
                </View>
            </ScrollView>
        </PopUp>
    </View>

}
export default PayVolunteerPop